<template>
  <div class="home">
    <el-button @click="loadDetail">通过id查找详情</el-button>
    <el-button @click="loadList">查询列表数据</el-button>
    <el-button @click="postBody">post body传参</el-button>
    <el-button @click="postUpload">post文件上传</el-button>
    <el-button @click="postDownload">post文件下载</el-button>
    <el-button @click="request201">后端返回201</el-button>
    <el-button @click="postDownloadError">post文件下载出错</el-button>
    <el-button @click="expBizTips">业务异常提示</el-button>
    <el-button @click="exp500Tips">500异常提示</el-button>
    <el-button @click="exp403Tips">403没权限</el-button>
    <el-button @click="reqInterceptorReject">前端拦截器拒绝执行该请求</el-button>
    <input @change="change" type="file" ref="fileRef" style="display: none" />
  </div>
</template>

<script>
import request from "@/util/request.js";
export default {
  name: "Home",
  components: {},
  methods: {
    async loadDetail() {
      const { data } = await request.get("/api/detail/1");
      console.log("data", data);
    },
    async loadList() {
      const { data } = await request.get("/api/list?page=1&size=10");
      console.log("data", data);
    },
    async postBody() {
      const { data } = await request.post("/api/add", {
        name: "张三",
        age: 12,
        arr: [2, 3, 4],
      });
      console.log("data", data);
    },
    async postUpload() {
      this.$refs.fileRef.click();
    },
    async change(e) {
      let files = e.target.files;
      let formData = new FormData();
      formData.append("file", files[0]);
      formData.append("name", "张三");
      const { data } = await request({
        url: "/api/upload",
        method: "post",
        data: formData,
        onUploadProgress: function (progressEvent) {
          let complete =
            (((progressEvent.loaded / progressEvent.total) * 100) | 0) + "%";
          console.log("上传 " + complete);
        },
      });
      console.log("data", data);
    },
    async postDownload() {
      const resp = await request({
        url: "/api/download",
        method: "post",
        responseType: "blob",
      });
      if (resp.data.type == "application/octet-stream") {
        const filename = resp.headers["content-disposition"];
        const blob = new Blob([resp.data]);
        var downloadElement = document.createElement("a");
        var href = window.URL.createObjectURL(blob);
        downloadElement.href = href;
        downloadElement.download = filename.split("filename=")[1];
        document.body.appendChild(downloadElement);
        downloadElement.click();
        document.body.removeChild(downloadElement);
        window.URL.revokeObjectURL(href);
      }
    },
    async request201() {
      const { data } = await request.post("/api/201");
      console.log(data);
    },
    async postDownloadError() {
      const resp = await request({
        url: "/api/download/error",
        method: "post",
        responseType: "blob",
      });
      if (resp.data.type == "application/octet-stream") {
        const filename = resp.headers["content-disposition"];
        const blob = new Blob([resp.data]);
        var downloadElement = document.createElement("a");
        var href = window.URL.createObjectURL(blob);
        downloadElement.href = href;
        downloadElement.download = filename.split("filename=")[1];
        document.body.appendChild(downloadElement);
        downloadElement.click();
        document.body.removeChild(downloadElement);
        window.URL.revokeObjectURL(href);
      }
    },
    async expBizTips() {
      try {
        const { data } = await request.post("/api/exp");
        console.log(data);
      } catch (e) {
        console.log("捕获已知的业务异常", e.bizData);
      }
    },
    async exp500Tips() {
      const { data } = await request.post("/api/error");
      console.log(data);
    },
    async exp403Tips() {
      const { data } = await request.post("/api/403");
      console.log(data);
    },
    async reqInterceptorReject(){
      await request.post("/api/reject");
    }
  },
};
</script>
